VimUnDo aUOҾfIJ[;7>__< margin-top:8em; " ^_ _ '
" v " ^
@ & ( 6 ; var ustensiles = recette.select("#ustensiles");5_ 4
" v " ^, A
6 5 script-src 'self' 'unsafe-inline';5_ E
" v " ^ B
6 F script-src 'self' 'unsafe-inline' http://localhost;5_
$
" v " ^ C 6 % img-src 'self';5_ J 5 I v I ^ D
6 K script-src 'self' 'unsafe-inline' http://localhost:8000;5_
" v " ^ G 6 % default-src 'self';5_ v ^ H "> % form-action 'self'; % base-uri 'self';
5 style-src 'self' 'unsafe-inline'; 0 img-src 'self' filesystem;
% connect-src 'self';
V script-src 'self' 'unsafe-inline' http://localhost:8000 filesystem; % default-src 'none';
content=" 2 var ingredients = recette.select("g#ingredients");5_ * * 4 v ^ N 3 5 0 ingredients.hover(hide_uf, show_uf); 2 4 1 3
} 0 2 . fabrication.attr({opacity:1}); / 1 - ustensiles.attr({opacity:1}); . 0 function show_uf() { - / , .
} + - . fabrication.attr({opacity:0}); * , - ustensiles.attr({opacity:0}); ) + function hide_uf() {5_ ^e : : 9 5_ ^h 5_ ! ! 4 2 v 2 ^m O " 9 ! var recette = Snap(); 2 Snap.load("cookies.svg", function(f) { * var svg = f.select("svg"); $ recette.append(svg); }); = var ingredients = recette.select("#ingredients"); < var ustensiles = recette.select("#ustensiles"); = var fabrication = recette.select("#fabrication"); # // function hide_uf() { 0 // ustensiles.attr({opacity:0}); 1 // fabrication.attr({opacity:0}); // } // # // function show_uf() { 0 // ustensiles.attr({opacity:1}); 1 // fabrication.attr({opacity:1}); // } // 3 // ingredients.hover(hide_uf, show_uf);5_ ! ! ! > v 2 ^} % & ! " & 5_ " ! ! > v 2 ^Ȁ ! # if (error) throw error;5_ # ! ! > v 2 ^ȁ " $ 1 document.body.appendChild(xml.documentElement);5_ $ ! ! > v 2 ^ȁ # % });5_ ! ! ! v ^ȇ P " ) U d3.xml("rect01.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ # ! ! v ^ȏ Q " $ ) ? document.body.appendChild(xml.documentElement);5_ ! ! v ^ " * " ) 5_ ! " " v ^ " * Load the SVG5_ ! ! ! V ^ R " ! Load the external SVG5_ % ! ! V ^% % ( + % ' * 5_ " ! ! V ^6 ! # , V d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ ' ! ! V ^A & * , 5_ ) ! ! V ^s ( * . # .attr("opacity:0.5)5_ ) ! ! V ^u ( * . # .attr("opacity,0.5)5_ ) $ ! ! V ^w S ( , . $ .attr("opacity",0.5)5_ + " ! ! V ^ɉ T * , 0 " .attr("opacity",1)5_ + " ! ! V ^ + 6 1 , - 1 + - 0 5_ ( + ( V ^ ' ( ! .on("mouseenter") $ .attr("opacity",0.5) ! .on("mouseleave") # .attr("opacity",1);5_ ( ( ( V ^ ' ) 6 .on("mouseover", function(d) {5_ ) ) 1
V ^ 0 2
}) / 1
} . 0 @ .style("top", (d3.event.pageY - 24) + "px"); - / @ .style("left", (d3.event.pageX + 5) + "px") , . 4 div .html(d.datetime.substring(0,10) ) + - , .style("opacity", .8); * , $ .duration(200) ) + $ div.transition() ( * 2 if(d3.select(this).style("opacity") != 0){5_ * ( ) 1
V ^ ) + 6 0 div.transition() 5_ + * ) 1
V ^ * , 6 0 .duration(200) 5_ , 2 ) 1
V ^ + - 6 8 .style("opacity", .8); 5_ - > ) 1
V ^ , . 6 @ div .html(d.datetime.substring(0,10) ) 5_ . G ) 1
V ^ - / 6 L .style("left", (d3.event.pageX + 5) + "px") 5_ - - = / H V H ^ , - > div .html(d.datetime.substring(0,10) ) G .style("left", (d3.event.pageX + 5) + "px") L .style("top", (d3.event.pageY - 24) + "px"); 5_ * * * v ^? U ) + 3 ( div.transition()5_ " " " v ^U ! # 3 b const svg = d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ ' " " v ^W & ( 3 svg5_ ' " " v ^Y & ( 3 svg 5_ ' " " v ^Z V & ) 3 var svg 5_ * " " v ^m ) * > if(d3.select(this).style("opacity") != 0){5_ - " " v ^m , - }5_ * $ * $ , $ v $ ^n W + - 2 .style("opacity", .8); * , * .duration(200) ) + ) this.transition()5_ * * * v ^n Z ) + 2 % this.transition()5_ * ' ! ' # v # ^nZ [ ) + 2 " d.transition()5_ * ' ! ' # v # ^n ) + 2 % this.transition()5_ * " ' ! ' # v # ^n \ ) , 2 / d3.select(this.transition()5_ - + ' ! ' # v # ^o ] , . 3 . .style("opacity", .8);5_ * ' ! ' # v # ^of ) + 3 # d3.select(this)5_ ' ' ! ' # v # ^os & ( 3 ' var svg = d3.select("svg");5_ ' & ' ! ' # v # ^ot & ( 3 * var svg = d3.selectAll("svg");5_ ' ' ! ' # v # ^ov & ( 3 ( var svg = d3.selectAll("g");5_ ( ' ! ' # v # ^oz ' ) 3 svg5_ ( ' ! ' # v # ^o~ ' ) 3 gropus5_ ( ' ! ' # v # ^o ' ) 3 grous5_ + + - V ^o , . . .style("opacity", .5); + - & .duration(200) * , % .transition()5_ * + - V ^o ^ * , 4 * , 3 5_ ' ' + + $ v $ ^o & ( 4 + var groups = d3.selectAll("g");5_ + % + + $ v $ ^o * , 4 / .style("color", "red");5_ + - + + $ v $ ^o _ * , 4 0 .style("stroke", "red");5_ + + $ v $ ^p ! 5 4 5_ ) ' ) ' ) * v * ^p# ( * 6 . var groups = d3.selectAll("path");5_ - - - V ^p( - / 6 - . 6 , . 4 .style("stroke", "#ff0000");5_ . . . % v % ^p* ` - / 7 4 .style("stroke", "#ff0000");5_ ) ( . . % v % ^pT ( * 7 + var groups = d3.selectAll("p");5_ v ^pX ! 7
OK blabla
5_
v ^p\ ! 7
Recettes
5_ v ^p] ! 7
Recettes5_ v ^p` a ! 7
Recettes
5_ - - - V ^pm , . 7 // .style("stroke", "#ff0000");5_ . . . V ^po b - / 3 .style("color", "#ff0000");5_ ) ' . . V ^p c ( * 7 . var groups = d3.selectAll("path");5_ - 3 . . V ^p - / 8 - / 7 5_ . ! / / V ^p - / 8 ! console.log()5_ . / / V ^p - / 8 " console.log();5_ . ! / / V ^p d - / 8 $ console.log("");5_ ) * / / V ^p ( * 8 2 var groups = d3.selectAll("svg path"); ) * 8 5_ ) * / / V ^p ( * 8 U var groups = d3.selectAll("svgrecette_du_tuyau_floral_débordé_1 path");5_ ) * / / V ^p e ( * 8 V var groups = d3.selectAll("svg#recette_du_tuyau_floral_débordé_1 path");5_ ) ' ) ' ) J v H ^p f ( * 8 S var groups = d3.selectAll("#recette_du_tuyau_floral_débordé_1 path");5_ ( ( 3 v $ ^q ' 5 8 ( ) 8 5_ ) ) ) v ^q ( * D . var groups = d3.selectAll("path");5_ ) & ) & ) ) v ) ^q ( * D - var title = d3.selectAll("path");5_ * * * v ^q ) + D groups5_ - * * v ^q , - 4 .style("stroke", "#ff0000");5_ . . . V ^q - / 6 // .style("color", "#ff0000");5_ . " . . V ^q . / D 3 .style("color", "#ff0000"); , . C 5_
. ! - - V ^q g - / C , console.log("selected");5_
9 ! 9 ! 9 ( v ( ^q h 8 : C , console.log("selected");5_
4 9 ! 9 ( v ( ^q i 3 5 C . var groups = d3.selectAll("path");5_
4 ; 9 ! 9 ( v ( ^rt 4 6 D 4 6 C 5_
5 : ! : ( v ( ^r} 4 6 D console.log(groups);5_
5 : ! : ( v ( ^r} 4 6 D console.log(groups);5_ 5 : ! : ( v ( ^r~ 4 6 D console.log(groups);5_ ) : ! : ( v ( ^r ) + D ) * D 5_ * ; ! ; ( v ( ^r j ) + E console.log(groups);5_ $ ; ! ; ( v ( ^r # % E V d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ ' ; ! ; ( v ( ^r ' ) F ' ) E 5_ ( < ! < ( v ( ^r k ' ) F console.log(svg);5_ 6 6 6 ( v ( ^s
l 5 7 F < var groups = d3.select("svg").selectAll("path");5_ 6 6 6 ( v ( ^s 5 7 F / var groups = svg.selectAll("path");5_ 6 & 6 6 ( v ( ^s m 5 7 F 9 var groups = d3.select(svg.selectAll("path");5_ + 6 6 ( v ( ^s8 n * + console.log(title);5_ & 5 5 & v & ^t` % ' E C document.body.appendChild(xml.documentElement);5_ ( 5 5 & v & ^tl ( * F ( * E 5_ $ 6 6 & v & ^tv # % F ` var svg = d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ ( 6 6 & v & ^ty ' ) F console.log(svg);5_ ) 6 6 & v & ^t{ o ( * F 5_ ) 4 6 6 & v & ^t ) + G ) + F 5_ ! * 7 7 & v & ^t p ) + G console.log(svg)5_ " ! 7 7 7 & v & ^t q 6 8 G : var groups = d3.select(svg).selectAll("path");5_ ! # " 7 7 7 & v & ^t 6 8 G / var groups = svg.selectAll("path");5_ " $ # 7 7 7 & v & ^t r 6 8 G 1 var groups = svg//.selectAll("path");5_ # % $ 7 7 7 v ^t s 6 8 G 2 var groups = svg;//.selectAll("path");5_ $ & % = 7 7 v ^t < = ( console.log("path");5_ % ' & 1 7 7 v ^t 0 1 ) console.log("title");5_ & ( ' , , 4 v ^u t 3 5 }) 2 4 1 // .style("opacity", .5); 1 3 ) // .duration(200) 0 2 ( // .transition() / 1 3 .style("color", "#ff0000"); . 0 # d3.select(this) - / . .on("mouseover", function(d) { , . title + - + var title = d3.selectAll("h1");5_ ' ) ( ; 3 , 4 v ^u u ; = F ; = E 5_ ( * ) < ' , 4 v ^u ; < G ( console.log("path"); = ? F 5_ ) + * = , 4 v ^u < = G ( console.log("path"); > @ F 5_ * , + > , 4 v ^u = > G ( console.log("path"); ? A F 5_ + - , ? , 4 v ^u > ? G ( console.log("path"); @ B F 5_ , . - @ , 4 v ^u @ A G ( console.log("path"); > @ F 5_ - / . ? , 4 v ^u ? @ G ( console.log("path"); = ? F 5_ . 0 / > , 4 v ^u > ? G ( console.log("path"); < > F 5_ / 1 0 = , 4 v ^u = > G ( console.log("path"); ; = F 5_ 0 2 1 < , 4 v ^u < = G ( console.log("path"); : < F 5_ 1 3 2 ; , 4 v ^u v ; < G ( console.log("path"); 9 ; F 5_ 2 4 3 6 ( , 4 v ^u w 5 7 F / var groups = svg.selectAll("path");5_ 3 5 4 6 ( 6 ( 6 + v + ^v x 5 7 F 3 var groups = svg.selectAll("svg path");5_ 4 7 5 ( ( ( V ^vB { ' ) console.log(xml);5_ 5 8 6 7 6 6 6 v ^v | 5 7 F / var groups = svg.selectAll("path");5_ 7 9 8 ! ^dT ! " H # % G ! # F 5_ 8 : 9 # ^dW " 7 G # $ G 5_ 9 ; : 6 ^dW 5 : Z });5_ : < ; # # 6 v ^d[ " 7 ] Wd3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", + function(error, documentFragment) { , if (error) {console.log(error); return;} " var svgNode = documentFragment 0 .getElementsByTagName("svg")[0]; . //use plain Javascript to extract the node / main_chart_svg.node().appendChild(svgNode); 7 //d3's selection.node() returns the DOM node, so we 0 //can use plain Javascript to append content 0 var innerSVG = main_chart_svg.select("svg"); 4 innerSVG.transition().duration(1000).delay(1000) .select("circle") .attr("r", 100); });5_ ; = < # # 7 V ^d` " 8 ] _ d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", 3 function(error, documentFragment) { 4 if (error) {console.log(error); return;} * var svgNode = documentFragment 8 .getElementsByTagName("svg")[0]; 6 //use plain Javascript to extract the node 7 main_chart_svg.node().appendChild(svgNode); ? //d3's selection.node() returns the DOM node, so we 8 //can use plain Javascript to append content 8 var innerSVG = main_chart_svg.select("svg"); < innerSVG.transition().duration(1000).delay(1000) # .select("circle") " .attr("r", 100); }); 5_ < > = # # # [ v [ ^dh " $ ] c d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", 5_ = ? > # " # # [ v [ ^dl " $ ] " d3.xml("cookies.svg", 5_ > @ ? # # # [ v [ ^dn " $ ] ! d3.xml("cookies.svg", 7 function(error, documentFragment) {5_ ? A @ # # # [ v [ ^d # % \ # $ \ 5_ @ B A # # # [ v [ ^d " # E d3.xml("cookies.svg", function(error, documentFragment) {5_ A C B ' ' ' - v - ^d & ( \ . var svgNode = documentFragment5_ B D C ' ' ' - v - ^d & ( \ ! var svgNode = xml < .getElementsByTagName("svg")[0];5_ C E D ' ! ' ! ' ! v ! ^d } & ( [ B var svgNode = xml .getElementsByTagName("svg")[0];5_ D F E * * * v ^d ~ ) + [ ; main_chart_svg.node().appendChild(svgNode);5_ E G F ) * * v ^d ) + \ ) + [ 5_ F H G / / / , v , ^d . 0 \ < var innerSVG = main_chart_svg.select("svg");5_ G I H 1 1 3 $ v $ ^d 0 2 Z innerSVG.; 0 2 \ @ innerSVG.transition().duration(1000).delay(1000) ' .select("circle") & .attr("r", 100);5_ H J I 7 7 U v ^e T V }) S U 1 // .style("opacity", .5); R T ) // .duration(200) Q S ( // .transition() P R 6 // .style("color", "#ff0000"); O Q 4 .style("stroke", "#ff0000"); N P # d3.select(this) M O ( console.log("path"); L N . .on("mouseover", function(d) { K M groups J L console.log(groups); I K . var groups = d3.selectAll("path"); H J G I // }) F H 4 // // .style("opacity", .5); E G , // // .duration(200) D F + // // .transition() C E 6 // .style("color", "#ff0000"); B D & // d3.select(this) A C 1 // .on("mouseover", function(d) { @ B // title ? A . // var title = d3.selectAll("h1"); > @ = ? console.log(svg); < > 5 var svg = d3.select(xml.documentElement); ; = // console.log(xml); : < }); 9 ; ? document.body.appendChild(xml.documentElement); 8 : ' if (error) throw error; 7 9 ` var xml = d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) { 6 8 $ // Load the external SVG5_ I K J / 1 1 D v D ^e: / 1 [ / 1 Z 5_ J L K 2 2 2 D v D ^eK 1 3 [ F innerSVG.selectAll("path").style("stroke","#fff0000");5_ K M L 2 6 2 2 D v D ^eP 1 5 [ R var paths = innerSVG.selectAll("path").style("stroke","#fff0000");5_ L N M 3 2 2 D v D ^eT 2 4 ] 5_ M O N 4 ) 2 2 D v D ^ef 3 5 ] 1 paths.style("stroke","#fff0000");5_ N P O 4 2 2 D v D ^el 3 5 ] 0 paths.style("stroke","#ff0000");5_ O Q P 4 $ 2 2 D v D ^e 3 6 ] @ paths.on("mouseover").style("stroke","#ff0000");5_ P R Q 5 2 2 D v D ^e 4 6 ^ , ).style("stroke","#ff0000");5_ Q S R 5 > 2 2 D v D ^e 4 7 ^ > d3.select(this).style("stroke","#ff0000");5_ R T S : : Z v 5 ^e 9 ; _ " ' // // Load the external SVG c // var xml = d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) { * // if (error) throw error; B // document.body.appendChild(xml.documentElement); // }); # // // console.log(xml); 8 // var svg = d3.select(xml.documentElement); // console.log(svg); // 1 // // var title = d3.selectAll("h1"); // // title 4 // // .on("mouseover", function(d) { ) // // d3.select(this) 9 // // .style("color", "#ff0000"); . // // // .transition() / // // // .duration(200) 7 // // // .style("opacity", .5); // // }) // 1 // var groups = d3.selectAll("path"); # // console.log(groups); // groups 1 // .on("mouseover", function(d) { + // console.log("path"); & // d3.select(this) 7 // .style("stroke", "#ff0000"); 9 // // .style("color", "#ff0000"); + // // .transition() , // // .duration(200) 4 // // .style("opacity", .5); // }) 5_ S U T ( 9 : : v 5 ^e ( ) ? : //use plain Javascript to extract the node & ( > 5_ T V U ' : : v 5 ^e & ( > : //use plain Javascript to extract the node5_ U W V ' ; : : v 5 ^e & ( > ; // Use plain Javascript to extract the node5_ V X W % : : v 5 ^e $ & > 8 if (error) {console.log(error); return;}5_ W Y X % : : v 5 ^e $ & > 7 if(error) {console.log(error); return;}5_ X Z Y ( : : v 5 ^f * , 1 body.node().appendChild(svgNode); ' ) A var svgNode = xml.getElementsByTagName("svg")[0];5_ Y [ Z : : : v 5 ^f : = ? : < > 5_ Z \ [ < : : v 5 ^f# ; = @
d3.select(this).style("stroke","#ff0000");5_ d f e * ( 8 5 8 6 v 6 ^f ) + C 1 var recipe = d3.select("recipe");5_ e g f 5 $ 8 5 8 6 v 6 ^g- 5 7 D 5 7 C 5_ f h g 4 3 9 5 9 6 v 6 ^g2 3 6 D 3 paths.on("mouseover", function(d) {5_ g i h 5 : 5 : 6 v 6 ^g5 4 6 E me = 5_ h j i 5 : 5 : 6 v 6 ^g6 4 6 E var me = 5_ i k j 6 # : 5 : 6 v 6 ^g> 5 7 E > d3.select(this).style("stroke","#ff0000");5_ j l k 5 - : 5 : 6 v 6 ^g@ 4 7 E - var me = d3.select(this);5_ k m l 6 ; 5 ; 6 v 6 ^h 5 7 F me.data5_ l n m 6 ) ; 5 ; 6 v 6 ^h 5 7 F , me.data(function(d) {});5_ m o n ; 3 ; 3 ; ; v ; ^h : < F > d3.select(this).style("stroke","#000000");5_ n p o ; P ; 3 ; ; v ; ^h : < F R d3.select(this).style("stroke",function(d){return me.data(););5_ o q p ; O ; 3 ; ; v ; ^h : < F Q d3.select(this).style("stroke",function(d){return me.data());5_ p r q 6 B ; 3 ; ; v ; ^h 5 7 F E me.data(function(d) {return me.style("stroke")});5_ q s r ; # ; 3 ; ; v ; ^h : = F R d3.select(this).style("stroke",function(d){return me.data(););5_ r t s ; ; 3 ; ; v ; ^h : < G # d3.select(this)5_ s u t ; , ; 3 ; ; v ; ^h : < G , var me = d3.select(this)5_ t v u < ; 3 ; ; v ; ^h ; = I me.style("stroke",function(d){return me.data(););5_ u w v < C ; 3 ; ; v ; ^< ; = G E me.style("stroke",function(d){return me.data(););5_ v x w 6 6 6 / v / ^ 5 7 G F me.data(function(d) {return me.style("stroke");});5_ w y x 6 . 6 6 / v / ^ 5 7 G 2 me.data(me.style("stroke");});5_ x z y 6 . 6 6 / v / ^ 5 7 G 1 me.data(me.style("stroke")});5_ y { z 8 6 6 / v / ^ 7 8 5_ z | { ; 9 ; 9 ; A v A ^ : < F F me.style("stroke",function(d){return me.data();});5_ { } | 6 6 6 # v # ^ 5 7 F 0 me.data(me.style("stroke"));5_ | ~ } 6 / 6 6 # v # ^ 5 7 F 1 me.data([me.style("stroke"));5_ } ~ 5 , 6 6 # v # ^ 5 7 G 5 7 F 5_ ~ 6 1 7 7 # v # ^* 5 7 G 7 // Save the stroke color in te data5_ 6 3 7 7 # v # ^, 5 7 G 8 // Save the stroke color in the data5_ 6 9 7 7 # v # ^0 5 7 G 9 // Save the stroke color in D3's data5_ ; , 7 7 # v # ^5 ; = H ; = G 5_ 2 0 2 0 2 3 v 3 ^_ 1 3 H 7 var paths = innerSVG.selectAll("path");5_ 2 0 2 0 2 3 v 3 ^ 1 3 H 4 var paths = innerSVG.selectAll("g");5_ 2 4 2 0 2 3 v 3 ^ 1 3 H 8 var paths = innerSVG.selectAll("paths");5_ 7 1 2 0 2 3 v 3 ^ 7 9 I 7 9 H 5_ 3 2 0 2 3 v 3 ^ 2 3 # console.log(paths);5_ 0 2 0 2 3 v 3 ^ / 0 & console.log(innerSVG);5_ / 1 0 1 3 v 3 ^ 0 2 7 var paths = innerSVG.selectAll("path"); . 0 4 var innerSVG = recipe.select("svg");5_ 8 1 0 1 3 v 3 ^ 8 : G 5_ 1 2 1 0 1 3 v 3 ^ 0 3 H 2 var paths = svg.selectAll("path");5_ / . 1 0 1 3 v 3 ^> / 3 J / 1 I 5_ 2 4 0 4 3 v 3 ^@ 1 2 + steps.forEach(function(d) {5_ 1 3 0 3 3 v 3 ^@ 0 1 D var steps = d3.select("[inkscape:groupmode=layer]");5_ 1 2 0 2 3 v 3 ^@ 0 1 5_ # # # v ^@ " $ I ` var xml = d3.xml("cookies.svg").mimeType("image/svg+xml").get(function(error, xml) {5_ / . 1 # 9 v ( ^C / 2 J / 1 I 5_ E 3 # ; v ( ^C D I K 5_ G 3 # ; v ( ^C F H N
5_ 1 3 # ; v ( ^C 0 3 N svg.5_ 2 4 # < v ( ^D 1 3 O .data()5_ 2 + 4 # < v ( ^D 1 3 O . .data(xml.querySelector())5_ 2 / 4 # < v ( ^D 1 3 O 1 .data(xml.querySelectorAll())5_ 2 0 4 # < v ( ^D 1 3 O 3 .data(xml.querySelectorAll(""))5_ 2 M 4 # < v ( ^D 4 6 R 5 6 R 1 6 O M .data(xml.querySelectorAll("[inkscape:groupmode=layer]"))5_ 5 7 # ? v ( ^D 4 6 R < text(function(d) { return d.textContent; });5_ 5 7 # ? v ( ^D 4 6 R B . text(function(d) { return d.textContent; });5_ / . 7 # ? v ( ^D . / S / var svg = recipe.select("svg"); 0 2 R 5_ 0 7 # ? v ( ^D / 0 S / var svg = recipe.select("svg"); 1 3 R 5_ 1 7 # ? v ( ^D 0 1 S / var svg = recipe.select("svg"); 2 4 R 5_ 2 7 # ? v ( ^D 1 2 S / var svg = recipe.select("svg"); 3 5 R 5_ 3 7 # ? v ( ^D 2 3 S / var svg = recipe.select("svg"); 4 6 R 5_ 4 7 # ? v ( ^D 3 4 S / var svg = recipe.select("svg"); 5 7 R 5_ 5 7 # ? v ( ^D 4 5 S / var svg = recipe.select("svg"); 6 8 R 5_ 6 7 # ? v ( ^D 5 6 S / var svg = recipe.select("svg"); 7 9 R 5_ 7 6 # ? v ( ^D 6 7 S / var svg = recipe.select("svg"); 8 : R 5_ 8 6 # ? v ( ^D 8 9 S / var svg = recipe.select("svg"); 6 8 R 5_ 7 6 # ? v ( ^D 7 8 S / var svg = recipe.select("svg"); 5 7 R 5_ . 7 # ? v ( ^D - . 5_ * * , . V , ^E ) * 2 var recipe = d3.select("#recipe"); 4 recipe.node().appendChild(svg_elem); C //d3's selection.node() returns the DOM node, so we < //can use plain Javascript to append content 5_ / * , * V , ^E / 5 L / 0 L 5_ + D * , * V , ^F- * , Q M .data(xml.querySelectorAll("[inkscape:groupmode=layer]"))5_ + J * , * V , ^F/ * , Q N .data(xml.querySelectorAll("[inkscape:groupmode='layer]"))5_ + 0 * , * V , ^F4 * , Q O .data(xml.querySelectorAll("[inkscape:groupmode='layer']"))5_ + * , * V , ^FJ * , Q P .data(xml.querySelectorAll("g[inkscape:groupmode='layer']"))5_ + & + & + , v , ^FU * , Q ` .data(xml.documentElement.querySelectorAll("g[inkscape:groupmode='layer']"))5_ + + + & v & ^F^ * , Q Y .data(xml.document.querySelectorAll("g[inkscape:groupmode='layer']"))5_ + 2 + + & v & ^Fi * , Q P .data(xml.querySelectorAll("g[inkscape:groupmode='layer']"))5_ + E + + & v & ^Fj * , Q Q .data(xml.querySelectorAll("g['inkscape:groupmode='layer']"))5_ + 2 + 2 + M v M ^q * , Q R .data(xml.querySelectorAll("g['inkscape:groupmode'='layer']"))5_ . ( + 2 + M v M ^r6 - / Q A .text(function(d) { return d.textContent; });5_ + 0 + 2 + M v M ^rG * , Q ? .data(xml.querySelectorAll("g[id=layer1]"))5_ ( # + 2 + M v M ^ra ( + R ( * Q 5_ * - - = v = ^rj ) + S console.log( * + S 5_ * - - = v = ^rm ) + S A console.log((xml.querySelectorAll("[id=layer1]"))5_ * @ - - = v = ^rn ) + S @ console.log(xml.querySelectorAll("[id=layer1]"))5_ * ? - - = v = ^s3 ) + S A console.log(xml.querySelectorAll("[id=layer1]"));5_ * ? * ? * H v H ^sC ) + S K console.log(xml.querySelectorAll("[id=layer1]").entries());5_ * * ? * H v H ^sE ) + S A console.log(xml.querySelectorAll("[id=layer1]"));5_ * K * ? * H v H ^sH ) + S L console.log(Array.from(xml.querySelectorAll("[id=layer1]"));5_ * * * v ^s^ ) + S M console.log(Array.from(xml.querySelectorAll("[id=layer1]")));5_ * L * * v ^sb ) + S M var steps = Array.from(xml.querySelectorAll("[id=layer1]")));5_ * L * * v ^sd * . T + , T ) , S L var steps = Array.from(xml.querySelectorAll("[id=layer1]"));5_ , , - v ^s| , . } + - a var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ * * * & v & ^s ) + V L var steps = Array.from(xml.querySelectorAll("[id=layer1]"));5_ * ? * * & v & ^s ) + V A var steps = xml.querySelectorAll("[id=layer1]"));5_ + $ + $ + - v - ^s * , V = for (var i = 0; i < myNodeList.length; ++i) {5_ , , , ( v ( ^s + - V s var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ , ( , , ( v ( ^s + - V n var item = steps[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ , ' , , ( v ( ^s , . W , . V 5_ - $ , , ( v ( ^s , . W & console.log(item);5_ 4 @ 4 @ 4 J v J ^s 3 5 W P .text(function(d) { console.log(d);return d.textContent; });5_ - % - % - & v & ^s , . W ) console.log(item.id);5_ - % - % - & v & ^s , . W , console.log(item.label);5_ * 3 - % - & v & ^t ) + W @ var steps = xml.querySelectorAll("[id=layer1]");5_ * N - % - & v & ^t ) + W R var steps = xml.querySelectorAll("[inkscape\\:groupmode=layer1]");5_ - % - % - 2 v 2 ^t , . W 5 console.log(item.inkscape:label);5_ * 3 * 3 * = v = ^t ) + W Q var steps = xml.querySelectorAll("[inkscape\\:groupmode=layer]");5_ ) * 3 * = v = ^t ) + X ) + W 5_ 2 1 2 1 2 9 v 9 ^t 1 3 X > .data(xml.querySelectorAll("[id=layer1]"))5_ 5 @ 5 @ 5 D v D ^u 4 6 X J .text(function(d) { console.log(d);return d.label; });5_ 5 5 5 @ 5 D v D ^uh 4 6 X G .text(function(d) { console.log(d);return d.id; });5_ 1 " 5 @ 5 D v D ^u 1 3 Y 1 3 X 5_ . % . % . & v & ^u - / Y ) console.log(item.id);5_ . % . % . & v & ^u - / Y ( console.log(item[]);5_ . & . % . & v & ^u - / Y * console.log(item[""]);5_ . $ . % . & v & ^vF - / Y 8 console.log(item["inkscape:label"]);5_ . C . % . & v & ^vJ - / Y E console.log(item.getAttribute("inkscape:label"]);5_ 6 ( 6 ( 6 9 v 9 ^vT 5 7 Y J .text(function(d) { console.log(d.id);return d.id; });5_ 6 1 6 1 6 2 v 2 ^vX 5 7 Y 8 .text(function(d) { return d.id; });5_ 6 / 6 1 6 2 v 2 ^vo 5 7 Y T .text(function(d) { return d.getAttribute("inkscape:label"); });5_ & 6 1 6 2 v 2 ^v % ' Y 5_ & 6 1 6 2 v 2 ^v % ' Y (/***** Load the SVG as an XML doc *****/5_ % 6 6 1 6 2 v 2 ^v $ ' Y 6 if(error){console.log(error); return;}5_ ' 8 7 1 7 2 v 2 ^v & ) Z 8 /***** Load the SVG as an XML doc *****/5_ . . 1 V ^v - . 8 for (var i = 0; i < steps.length; ++i) { ( var item = steps[i]; E console.log(item.getAttribute("inkscape:label")); }5_ 1 1 1 D v D ^v 0 2 W F .data(xml.querySelectorAll("[*|groupmode=layer]"))5_ . 1 1 D v D ^v . 0 X . 0 W 5_ / * 2 2 D v D ^v . 0 X 3 // Bind the step layers to D3 data.5_ / 3 2 2 D v D ^v . 0 X 3 // Bind the step layers as D3 data.5_ 4 4 5 v ^w
3 6 X ! .append("li") \ .text(function(d) { return "step "+d.getAttribute("inkscape:label"); });5_ 5 + 4 5 v ^w 4 7 X ` .text(function(d) { return "step "+d.getAttribute("inkscape:label"); });5_ 6 M 4 5 v ^w' 5 8 Y P return "step "+d.getAttribute("inkscape:label"); });5_ 4 $ 4 5 v ^wF 4 6 [ 4 6 Z 5_ 5 4 6 v ^wK 4 6 [ .attr()5_ 5 ' 4 6 v ^wQ 4 6 [ ) .attr("class","")5_ v ^w^ [ body {5_ v ^wa [ step {5_ v ^wb [ .step {5_ v ^w _ margin1em;5_
; $ v ^w : < _ L return "step "+d.getAttribute("inkscape:label");5_
& v ^w ` _ 5_
v ^w ` background:5_
v ^w ` / background-color:ligthblue;5_
! ! ) v ) ^w ` + background-color:ligthblue;5_
" " # v # ^w ` & background-color:#aaf;5_ = " # v # ^w < ? ` });5_ = " # v # ^w < ? a })5_ > # " # v # ^w = ? b $ .on("mouseover")5_ > - " # v # ^w = ? b 0 .on("mouseover", functiom(d)5_ > 0 " # v # ^w = A b 0 .on("mouseover", function(d)5_ ? " # v # ^w > @ d 5_ ? 9 " # v # ^w > @ d : d3.select(this).style("opacity",""5_ ? ; " # v # ^w > @ d ; d3.select(this).style("opacity","0"5_ ? ' " # v # ^x > @ d < d3.select(this).style("opacity","0")5_ ? " " # v # ^x > @ d 8 d3.select().style("opacity","0")5_ ? @ " # v # ^x > @ d @ d3.select("#"+d.id).style("opacity","0")5_ ? > " # v # ^x) > @ d A d3.select("#"+d.id).style("opacity","0");5_ ? 3 ? 3 ? 9 v 9 ^x3 > @ d A d3.select("#"+d.id).style("opacity","1");5_ ? > ? 3 ? 9 v 9 ^x? > @ d A d3.select("#"+d.id).style("opacity","1");5_ ? C ? 3 ? 9 v 9 ^xA > @ d C d3.select("#"+d.id).style("opacity","0.5");5_ @ ? 3 ? 9 v 9 ^xC ? B d })5_ A ? 3 ? 9 v 9 ^xH @ B e .on(mouse5_ ! A ? 3 ? 9 v 9 ^xJ @ D e .on("mouse5_ " ! B ? 3 ? 9 v 9 ^xS A C g 5_ ! # " B ? 3 ? 9 v 9 ^xV B D g B C g 5_ " $ # B ? 3 ? 9 v 9 ^xW A B 5_ # % $ ? = ? 3 ? 9 v 9 ^xb > @ g C d3.select("#"+d.id).style("opacity","0.5");5_ $ & % L % L % Z v $ ^x Y [ }); X Z > me.style("stroke",function(d){return d;}); W Y F // Set back the stroke color from D3's data field. V X - var me = d3.select(this); U W 2 paths.on("mouseout", function(d) { T V S U }); R T 1 me.style("stroke","#ff0000"); Q S / // Change the stroke color. P R 2 me.data([me.style("stroke")]); O Q @ // Save the stroke color in D3's data field. N P - var me = d3.select(this); M O 3 paths.on("mouseover", function(d) { L N K M 2 var paths = svg.selectAll("path");5_ % ' & K . L % Z v $ ^x K O h K M g 5_ & ( ' M O % ] v $ ^x L N j svg.selectAll5_ ' ) ( M O % ] v $ ^x M Q k N O k L O j steps.forEach();5_ ( * ) M R % ` v $ ^x L M steps.forEach();5_ ) + * N Q % _ v $ ^x N P } M O a var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ * , + M $ M $ M - v - ^x L N l = for (var i = 0; i < myNodeList.length; ++i) {5_ + - , N N N ( v ( ^x M O l s var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ , . - N N N ( v ( ^x M O l c steps[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ - / . N ; N N ( v ( ^y M O l steps[i].setAttribute("opacity","0.5"); // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript5_ . 3 / L L O v + ^y- K M l 8 for (var i = 0; i < steps.length; ++i) { ; steps[i].setAttribute("opacity","0.5"); } 5_ / 4 0 3 2 L L v + ^y3 2 4 h 5_ 3 5 4 3 M M v + ^y4 2 8 i 3 4 i 5_ 4 6 5 3 Q Q v + ^y6 3 5 n 3 5 m 5_ 5 7 6 8 R R v + ^yD 7 8 5_ 6 8 7 D @ Q Q v + ^y D E o $ d3.selectAll F H n D F n D F m 5_ 7 9 8 F R R v + ^y F G o $ d3.selectAll D F n 5_ 8 : 9 E R R v + ^y E F o $ d3.selectAll C E n 5_ 9 ; : D $ R R v + ^y C E n $ d3.selectAll5_ : < ; D & R R v + ^y C E n ' d3.selectAll();5_ ; = < D & R R v + ^y C E n ( steps.forEach();5_ < > = D D D V ^m! C E 2 steps.forEach(function());5_ = ? > g g g
v
^nZ f h n
5_ > @ ? h
h
h v ^n^ g i n
5_ ? A @ > ! > ! > " v " ^ne = ? n % .append("li")5_ @ B A B > ! > " v " ^n B D o C D o B D n 5_ A C B C > > ! > " v " ^n B D o > .attr("value", function (d) { return d; })5_ B D C C > > ! > " v " ^n B D o > .attr("value", function (d) { return d; })5_ C E D D D D ! v ! ^o C E o 2 .on("mouseover", function(d) {5_ D F E E 4 D D ! v ! ^o E G p F G p E G o 5_ E G F E D D ! v ! ^o D E 5 // steps.forEach(function());5_ F H G E N D D ! v ! ^o) D F o N var selectedOption = d3.select(this).property("value")5_ G I H E $ E $ E ) v ) ^o. D F o O var selectedOption = d3.select(this).property("value");5_ H J I H H J v ^oO I K }) H J C d3.select("#"+d.id).style("opacity","0.5"); G I 1 .on("mouseout", function(d) {5_ I K J C H J v ^on B D o Q .attr("value", function (d) { return d; }) // selected option5_ J L K C H J v ^op C D p U .attr("value", function (d) { return d; }) // selected option A C o 5_ K M L B H J v ^op B C p U .attr("value", function (d) { return d; }) // selected option @ B o 5_ L N M A H J v ^op A B p U .attr("value", function (d) { return d; }) // selected option ? A o 5_ M O N @ 5 H J v ^ow ? B o U .attr("value", function (d) { return d; }) // selected option5_ N P O A % I K v ^o| @ C p ; return d; }) // selected option5_ O Q P B J L v ^o A C q - }) // selected option5_ P R Q @ 4 J L v ^o ? A q 5 .attr("value", function (d) { @ A q 5_ Q S R H & J L v ^o G I q A d3.select("#"+d.id).style("opacity","1");5_ R T S @ 9 @ 9 @ G v G ^o ? A q H .attr("value", function (d) { // selected option5_ S U T A $ D , D J v J ^o @ B q % return d; A B q 5_ T V U @ 5 D , D J v J ^p ? B q U .attr("value", function (d) { // value returned when selected5_ U W V D * E , E J v J ^p D F s D F r 5_ V X W 7 F , F J v J ^p] 7 9 t 7 9 s 5_ W Y X 8 G , G J v J ^p~ 8 9 u 7 steps[0].setAttribute("opacity","1.0"); 6 8 t 5_ X Z Y 7 G , G J v J ^p~ 7 8 u 7 steps[0].setAttribute("opacity","1.0"); 5 7 t 5_ Y [ Z 6 G , G J v J ^p~ 6 7 u 7 steps[0].setAttribute("opacity","1.0"); 4 6 t 5_ Z \ [ 6 G , G J v J ^p 5 7 t 8 for (var i = 0; i < steps.length; ++i) {5_ [ ] \ J & G , G J v J ^p J L u J L t 5_ \ ^ ] K - G , G J v J ^p J L u - console.log(selected)5_ ] _ ^ I . G , G J v J ^q I K u I J u 5_ ^ ` _ J $ J $ J + v + ^q I K v . console.log(selected);5_ _ b ` H J $ J + v + ^q? G J v })5_ ` c a b ; K $ K + v + ^qG : < w # d3.select("#steps")5_ b g c I K $ K + v + ^qI I K w I J w 5_ c h d g ; L $ L + v + ^qb : < x % d3.select("#steàps")5_ g i h < < < ! v ! ^q ; = x $ .selectAll("ul")5_ h j i J < < ! v ! ^q I K x % d3.select("#steàps")5_ i k j L < < ! v ! ^q K L ' console.log(d);5_ j l k N $ < < ! v ! ^q M O w H d3.select("#"+selected.id).style("opacity","1");5_ k m l N 3 N 3 N 5 v 5 ^ra M O w M d3.select("#layer"+selected.id).style("opacity","1");5_ l n m N ) 6 & 8 V & ^ru N R w N O w 5_ m o n O 6 & 8 V & ^rx N R z 8 for (var i = 1; i < steps.length; ++i) { ; steps[i].setAttribute("opacity","0.5"); }5_ n p o O 6 & 8 V & ^rz N R z < for (var i = 1; i < steps.length; ++i) { ? steps[i].setAttribute("opacity","0.5"); }5_ o q p N , 6 & 8 V & ^r M N { J d3.select("#layer"+selected).style("opacity","1"); O Q z 5_ p r q O 6 & 8 V & ^r N O { J d3.select("#layer"+selected).style("opacity","1"); P R z 5_ q s r P 6 & 8 V & ^r O P { J d3.select("#layer"+selected).style("opacity","1"); Q S z 5_ r t s N % 6 & 8 V & ^r M O z @ for (var i = 1; i < steps.length; ++i) {5_ s u t N 6 & 8 V & ^r M O z @ for (var i = 0; i < steps.length; ++i) {5_ t v u O 6 & 8 V & ^r N O C steps[i].setAttribute("opacity","0.5");5_ u w v O 6 & 8 V & ^r N P y O P y 5_ v x w O 6 & 8 V & ^r N P z J d3.select("#layer"+selected).style("opacity","1");5_ w y x O J 6 & 8 V & ^r N P z N d3.select("#layer"+selected).style("opacity","1");5_ x z y O / O / O 6 v 6 ^r N P z P d3.select("#layer"+selected).style("opacity","0.5");5_ y { z O 1 O / O 6 v 6 ^r N Q z I d3.select("#layer"+i).style("opacity","0.5");5_ z | { O 1 O / O 6 v 6 ^r N R { 1 d3.select("#layer"+i)5_ { } | T 4 O / O 6 v 6 ^r S V } J d3.select("#layer"+selected).style("opacity","1");5_ | ~ } T 3 O / O 6 v 6 ^r T W ~ T U ~ 5_ } ~ U O / O 6 v 6 ^r T W - .transition() / .duration(1000)5_ ~ V & V & V ) v ) ^r U W + .duration(1000)5_ Q * Q * Q - v - ^r P R / .duration(1000)5_ Q * Q * Q - v - ^r P R . .duration(500)5_ V ' Q * Q - v - ^r U W * .duration(500)5_ M Q * Q - v - ^s L M . console.log(selected);5_ M P * P - v - ^s
L N L N 5_ S Q * Q - v - ^s R U }5_ Z Z # \ V # ^|T Y Z 4 // .on("mouseout", function(d) { F // d3.select("#"+d.id).style("opacity","0.5"); // })5_ a a a V ^|h ` b / var svg = recipe.select("svg");5_ b b b V ^|j a c 5_ b b b V ^|k a c ~ //5_ 1 8 b b V ^|u 0 3 ~ W // No namespace management in selectors, thus will match any namespace.5_ 2 c c V ^|w 1 3 . thus will match any namespace.5_ 2 2 2 v ^| 1 3 1 // thus will match any namespace.5_ 2 2 2 v ^| 1 3 / // thus we match any namespace.5_ w 2 2 v ^σ> w y w y 5_ z 2 2 v ^σD y | 5_ y
2 2 v ^σJ x z 5_
y 2 2 v ^σJ ! x z % 5_
y 2 2 v ^σN " x z ) 5_
y 2 2 v ^σP # x z ( 5_
y y y ! v ! ^σV $ x z + 5_
v ^σ` .step {5_
v ^σe % | display:inline; padding:1em; ' border:thin solid blue; & background-color:#ddf; margin:1em;5_ * v ^σv & | .nav {5_ t * v ^υ# t v } u v } t v | 5_ u ' u ' u , v , ^υ, t v } : ‹5_ u u u v ^υ- t v } 4 ‹5_ v u u v ^υ0 v x } v w } 5_ w w w # v # ^υ2 ' v x ~ 1 ‹5_ w & w & w ' v ' ^υ> ( v x ~ - ‹5_ w & w ' v ' ^υx ~ 5_ z & z ' v ' ^υ} 5_
z & z ' v ' ^υ
}5_ } & } ' v ' ^υ 5_ V ^υ padding: 8px 16px; display: inline-block; text-decoration: none;5_
V ^υ !
}5_ ! ! # V ^υ ! #previous {
}5_ ! ! ! V ^υ 5_ $ " " V ^υ % background-color:#fff5_ % " " V ^υ % background-color:#55f5_ ! " " V ^υ ! 5_ " ! ! " " V ^υ ! " background-color:;5_ ! # " $ " " V ^υ & background-color:#55f;5_ " $ # " " " V ^υ ) ! # background-color:#;5_ # % $ % " " V ^υ 5_ $ & % % % V ^υ $ font-width:bold;5_ % ' & % % V ^υ * 5_ & ( ' % % % V ^φ " ! " " 5_ ' ) ( ! & & V ^φ
+ " ' border-radius: 50%;5_ ( * ) " " # v # ^φ ! & background-color:#aaf;5_ ) , * $ " # v # ^φ . ! & background-color:#aaf;5_ * - + , v ^φG " padding: 8px 16px;5_ , . - v ^φJ $ padding: 0.5px 16px;5_ - / . # v ^φL / $ padding: 0.5em 16px;5_ . 0 / v ^φS # padding: 0.5em 1em;5_ / 1 0 v ^φT 0 # padding: 0.2em 1em;5_ 0 2 1 ! v ^φ\ 1 % padding: 0.2em 0.4em;5_ 1 3 2 ! v ^φb % padding: 0.2em 0.3em;5_ 2 4 3 v ^φd 2 % padding: 0.2em 0.4em;5_ 3 5 4 ! v ^φ{ 3 % padding: 0.1em 0.4em;5_ 4 6 5 $ % v ^φ 4 $ & $ & 5_ 5 7 6 d v ^χ c e }) ;5_ 6 8 7 d v ^χ d j d f 5_ 7 9 8 h v ^χ+ g i 5_ 8 : 9 f & v ^χ/ e h & d3.select("#previous")5_ 9 ; : g v ^χ8 f h # .selectall("a")5_ : < ; i v ^χ< h j 5_ ; = < i v ^χH 5 h j ( d2.select(this).5_ < > = i v ^χJ 6 h j 5_ = ? > h v ^χb 7 g i / .on("click"), function(d) {5_ > @ ? v ^ϫ 8 font-size:2em;5_ ? A @ v ^Ϭ 9 font-size:3em;5_ @ B A h * v ^Ϭ} : g i . .on("click", function(d) {5_ A C B g g g V ^ϭ@ ; f h # .selectAll("a")5_ B D C g g g V ^ϭE < f g & // .selectAll("a")5_ C E D h , g g V ^ϭm h j i j h j 5_ D F E i - g g V ^ϭ h j < d3.select("#steps")..selectedIndex =5_ E G F i ; g g V ^ϭ h j ; d3.select("#steps").selectedIndex =5_ F H G i g g V ^ϭ h j 9 d3.select("#steps").selectedIndex5_ G I H i G g g V ^ϭ h k G var current = d3.select("#steps").selectedIndex5_ H J I h g g V ^ϭ g h - console.log("click"); i k 5_ I K J i $ g g V ^ϭ = h j - console.log("click");5_ J L K h : g g V ^ϭ > g i H var current = d3.select("#steps").selectedIndex;5_ K M L i , g g V ^ϭ i k i k 5_ L N M j % g g V ^ϭ i k ( if(current <= 0)5_ M O N j ' g g V ^ϭ i l ' if(current > 0)5_ N P O k h & h M v M ^ϭ j l k l 5_ O Q P k h & h M v M ^ϭ j l (d3.select("#steps").node().selectedIndex5_ P R Q k D h & h M v M ^ϭ j m D d3.select("#steps").node().selectedIndex5_ Q S R k N h & h M v M ^ϭ ? j l Q d3.select("#steps").node().selectedIndex = current+1;5_ R T S k 3 h & h M v M ^Ϯ k m 5_ S U T g - h & h M v M ^Ϯ
f i - .on("click", function() {5_ T V U i & i & i ? v ? ^Ϯ h j O var current = d3.select("#steps").node().selectedIndex;5_ U W V h ( i & i ? v ? ^Ϯ g i ) var steps_node = h i 5_ V X W h C i & i ? v ? ^Ϯ g i C var steps_node = d3.select("#steps").node()5_ W Y X i & i & i ? v ? ^Ϯ A h j 5 var current = .selectedIndex;5_ X Z Y l l l 5 v 5 ^Ϯ' B k m Q d3.select("#steps").node().selectedIndex = current-1;5_ Y [ Z m l l 5 v 5 ^Ϯ. C l n 5_ Z \ [ j $ j $ j * v * ^Ϯ D i k - console.log(current);5_ [ ] \ m 1 j $ j * v * ^ϯ5 m r n o m o 5_ \ ^ ] p j $ j * v * ^ϯ8 o p // Dispatch it.5_ ] _ ^ o j $ j * v * ^ϯ9 n o 5_ ^ ` _ o j $ j * v * ^ϯ: n p element.dispatchEvent(event);5_ _ a ` o o o " v " ^ϯ> n p 9 element.dispatchEvent(event);5_ ` b a m o o " v " ^ϯB E l m 2 steps_node.onchange();5_ a c b l ( n n " v " ^ϯQ l n l n 5_ b d c m 1 o o " v " ^ϯZ l n > // Manually call the change event.5_ c e d m 1 o o " v " ^ϯ^ l n @ // Manually call the onchange event.5_ d f e m : o o " v " ^ϯ` F l n A // Manually call the "onchange event.5_ e g f q o o " v " ^ϯh p q 5_ f h g r e q v " ^ϯl q r s 5_ g i h s s s # v # ^ϯn r t & d3.select("#previous")5_ h j i x # x # x % v % ^ϯu G w y ) if(current > 0) {5_ i k j x % x # x % v % ^ϯ H w y ( if(current < ) {5_ j l k y > x # x % v % ^ϯ x z A steps_node.selectedIndex = current-1;5_ k m l z x # x % v % ^ϯ I y z B // Manually call the "onchange" event.5_ l n m w x # x % v % ^ϯ v w 0 console.log(steps_node);5_ m o n j w # w % v % ^ϯ J i j 0 console.log(steps_node);5_ n p o i ) v # v % v % ^ϯ i k i k 5_ o q p v . w # w % v % ^ϯ K v x v w 5_ p r q x $ x # x % v % ^ϯ L w y 9 if(current < steps_node.length) {5_ q s r | x # x % v % ^ϯ | ~ | } 5_ r t s } $ v & v = v = ^ϯ | ~ - console.log(current); } ~ 5_ s u t } < v & v = v = ^ϯ M | ~ E console.log(steps_node.selectedIndexcurrent);5_ t v u } 6 v & v = v = ^ϰ
} ~ > console.log(steps_node.selectedIndex); { } 5_ u w v | v & v = v = ^ϰ { } > console.log(steps_node.selectedIndex);5_ v x w w $ v & v = v = ^ϰ v x - console.log(current);5_ w y x w % v & v = v = ^ϰ v x 0 console.log(""+current);5_ x z y | ( v & v = v = ^ϰ { } B console.log(steps_node.selectedIndex);5_ y { z | ) v & v = v = ^ϰ { } E console.log(""+steps_node.selectedIndex);5_ z | { | * v & v = v = ^ϰ N { } K console.log(" incr "+steps_node.selectedIndex);5_ { } | w 1 v & v = v = ^ϰ( v x 3 console.log("at "+current);5_ | ~ } w 8 x ' x 6 v 6 ^ϰ. v x : console.log("at "+current+" / "+); w x 5_ } ~ w 8 x ' x 6 v 6 ^ϰ1 O v x J console.log("at "+current+" / "+teps_node.length);5_ ~ x $ x ' x 6 v 6 ^ϰB P w y : if(current <= steps_node.length) {5_ x 6 x ' x 6 v 6 ^ϰW Q w y 9 if(current < steps_node.length) {5_ w x ' x 6 v 6 ^ϰe v w K console.log("at "+current+" / "+steps_node.length);5_ { w ' w 6 v 6 ^ϰf z { I console.log(" to "+steps_node.selectedIndex);5_ j w ' w 6 v 6 ^ϰg i j - console.log(current);5_ g , v ' v 6 v 6 ^ϰi g i g i 5_ i D w ' w 6 v 6 ^ϰr R h k D var steps_node = d3.select("#steps").node();5_ q x ' x 6 v 6 ^ϰ S p r }5_ p ; x ' x 6 v 6 ^ϰ p s p r 5_ r & z ' z 6 v 6 ^ϰ q s 2 d3.select("#previous")5_ r + z ' z 6 v 6 ^ϰ q s + d3.select(this)5_ r 2 z ' z 6 v 6 ^ϰ q s 4 d3.select(this).style();5_ r F z ' z 6 v 6 ^ϰ T q s I d3.select(this).style("background-color","");5_ & z ' z 6 v 6 ^ϱ ' . ( ) & ) & ( 5_ ) ( - v ^ϱ , . } + - color: black; * , text-decoration: none; ) + cursor: default; ( * pointer-events: none;5_ (
(
( v ^ϱ ' ) .not-active {5_ ( (
( v ^ϱ% U ' ) .inactive_link {5_ - (
( v ^ϱ2 - 1 - / 5_ . (
( v ^ϱ . 0 . / 5_ / / / # v # ^ϱ . 0 % pointer-events: none;5_ / / # v # ^ϱ color:black;5_ . . . # v # ^ϱ . 0 . 0 5_ . $ . . # v # ^ϱ . 0 . 0 5_ ( . . # v # ^ϱ ' ) % pointer-events: none;5_ ) . . # v # ^ϱ ( * cursor: default;5_ * ! . . # v # ^ϱ ) + & text-decoration: none;5_ + . . # v # ^ϱ * , color: black;5_ / . . # v # ^ϱ . 0 cursor:auto;5_ 0 . . # v # ^ϱ / 1 color:blue;5_ + . . # v # ^ϱ * , color:black;5_ * . . # v # ^ϱ ) + % text-decoration:none;5_ ) . . # v # ^ϱ ( * cursor:default;5_ ( . . # v # ^ϱ ' ) $ pointer-events:none;5_ $ . . # v # ^ϱ # % color:white;5_ # ! . . # v # ^ϱ " $ & background-color:#55f;5_ ! . . # v # ^ϱ & background-color:#ccf;5_ . . # v # ^ϱ font-size:1em;5_ . . # v # ^ϱ font-width:bold;5_ * . . # v # ^ϱ V ) * & text-decoration: none;5_ } , } , } K v K ^ϱ W | ~ M d3.select(this).style("background-color","grey");5_ } , } , } 0 v 0 ^ϲ | ~ B d3.select(this).class("inactivelink");5_ } 1 } , } 0 v 0 ^ϲ X | ~ A d3.select(this).attr("inactivelink");5_ / } , } 0 v 0 ^ϲ: / 1 / 0 5_ 0 # 0 # 0 % v % ^ϲ= / 1 ' background-color: #55f;5_ 1 0 # 0 % v % ^ϲ@ Y 0 1 5_ 0 $ 0 # 0 % v % ^ϲO Z / 1 ' background-color: grey;5_ 0 0 # 0 % v % ^ϲZ / 0 ' background-color: gray;5_ * 0 # 0 % v % ^ϲ[ * , * + 5_ + 1 # 1 % v % ^ϲ] [ + , ' background-color: gray; ) + 5_ % 1 # 1 % v % ^ϲ 1 ‹5_ - 1 # 1 % v % ^ϲ : ‹5_ ! 1 # 1 % v % ^ϲ \ - ›5_ 1 # 1 % v % ^ϲ ' background-color: #ccf;5_ / 0 # 0 % v % ^ϲ / 1 / 0 5_ 0 1 # 1 % v % ^ϲ 0 1 ' background-color: #ccf; . 0 5_ 1 , 1
V ^ϲ 1 8 1 2 5_ 2 , 1
V ^ϲ 1 3 .activelink {5_ 2 , 1
V ^ϲ 2 4 2 3 5_ 4 4 ! 7 V ! ^ϲ ] 3 4 % pointer-events: auto; cursor: auto; ' background-color: #ccf; color: blue;5_ ! ! $
V ^ϲ ! #nav a:hover { ' background-color: #55f; color: white;
}5_ / & , , v ^ϲ / 1 / 1 5_ 0 , , v ^ϲ ^ / 1 color:white;5_ { ( , , v ^ϲ { } { } 5_ ~ I , , v ^ϲ } I d3.select(this).attr("class","inactivelink");5_ } } ~ V ^ϲ | 3 // Gray previous button I d3.select(this).attr("class","inactivelink");5_ ~ , ~ * ~ - v - ^ϲ ~ ~ 5_ ~ * ~ - v - ^ϳ _ ~ M d3.select(this).attr("class","inactivelink");5_ | ( V ( ^ϳ 5_ * | ( V ( ^ϳ ` . if(current == 0) {5_ | ( V ( ^ϳ# ~ }5_ | ( V ( ^ϳ' 5_ | ( V ( ^ϳ) 5_ > > ? v ? ^ϳ, a M d3.select(this).attr("class","inactivelink");5_ > ? v ? ^ϳ/ }5_ > ? v ? ^ϳ4 7 // Gray previous button5_ # > ? v ? ^ϳ6 5_ > ? v ? ^ϳ8 5_ > > ? v ? ^ϳ: b M d3.select(this).attr("class","inactivelink");5_ # > ? v ? ^ϳY 5_ , > ? v ? ^ϳb 4 // Enable the button5_ , > ? v ? ^ϳc 3 // Enable te button5_ } 0 > ? v ? ^ϳe c | ~ 7 // Gray previous button5_ ; ; < v < ^ϳ d @ if(current == steps_node.length-1) {5_ * * * v ^ϳ e ) + cursor: auto;5_ | | & V & ^ϳ { | . if(current == 0) { 6 // Disable this button M d3.select(this).attr("class","inactivelink"); $ } else { 5 // Enable this button K d3.select(this).attr("class","activelink"); }5_ n 1 | & | V & ^ϳ n p 5_ o } & } V & ^ϳ o w o p 5_ o & V & ^ϴ o q o p 5_ q & q & w v % ^ϴ p x . if(current == 0) { 6 // Disable this button M d3.select(this).attr("class","inactivelink"); $ } else { 5 // Enable this button K d3.select(this).attr("class","activelink"); }5_ p & p & p / v / ^ϴ f o q ? var current = steps_node.selectedIndex;5_ p 5 p & p / v / ^ϴ g o q D var current = d2.select(this).selectedIndex;5_ p 5 p & p / v / ^ϴ h o q J var current = d2.select(this)node().selectedIndex;5_ r ' r ' r * v * ^ϴ, i q s 2 // Disable this button5_ s & s & s ) v ) ^ϴ2 r t I d3.select(this).attr("class","inactivelink");5_ ' V ' ^ϴ= > if(current == steps_node.length) { M d3.select(this).attr("class","inactivelink"); $ } else { K d3.select(this).attr("class","activelink"); }5_ w ' V ' ^ϴ? w } w x 5_ x ( x ( | v & ^ϴF { } } z | K d3.select(this).attr("class","activelink"); y { $ } else { x z M d3.select(this).attr("class","inactivelink"); w y > if(current == steps_node.length) {5_ u & u & u ) v ) ^ϴJ t v 1 // Enable this button5_ v & v & v ) v ) ^ϴN j u w G d3.select(this).attr("class","activelink");5_ o v & v ) v ) ^ϴ\ o q o p 5_ q & q & q ; v ; ^ϴ_ k p r K var current = d2.select(this).node().selectedIndex;5_ z & z & z ) v ) ^ϴd y { I d3.select(this).attr("class","inactivelink");5_ | * z & z ) v ) ^ϴi l { } G d3.select(this).attr("class","activelink");5_ y 7 z & z ) v ) ^ϴ m x z : if(current == steps_node.length) {5_ % " & & v ^ϴ $ & ' background-color: gray;5_ & & & v ^ϴ n % ' color: black;5_ & & v ^ϵ{ 5_ v ^ϵ~ } 9 })(offsetTop + element.getBoundingClientRect().top)); # return t => scrollTo(0, i(t)) 6 var i = d3.interpolateNumber(offsetTop, offset); ' .tween("scroll", (offset => () => { .ease(easing) .duration(duration) .delay(delay) .each("end", endCallback) d3.transition() J var offsetTop = window.pageYOffset || document.documentElement.scrollTop5_ v ^ϵ } 5_ v ^ϵ function scrollToElement(element, duration = 400, delay = 0, easing = 'cubic-in-out', endCallback = () => {}) { \ var offsetTop = window.pageYOffset || document.documentElement.scrollTop # d3.transition() 1 .each("end", endCallback) % .delay(delay) + .duration(duration) % .ease(easing) ; .tween("scroll", (offset => () => { L var i = d3.interpolateNumber(offsetTop, offset); 9 return t => scrollTo(0, i(t)) M })(offsetTop + element.getBoundingClientRect().top)); } 5_ _ v ^ϵ ^ m _ ` 5_ ` 1 v ^ϵ _ b function scrollToElement(element, duration = 400, delay = 0, easing = 'cubic-in-out', endCallback = () => {}) {5_ a . v ^ϵ ` c a duration = 400, delay = 0, easing = 'cubic-in-out', endCallback = () => {}) {5_ b C v ^ϵ o a d F easing = 'cubic-in-out', endCallback = () => {}) {5_ v ^ϵ 5_ v ^ϵ } else {5_ ' v ^ϵ ' scrollToElement5_ ( v ^ϵ 5_ v ^ϵ 4 d3.select("#layer"+selected)5_ ( v ^ϵ * scrollToElement(); 5_ v ^ϵ 5_ D v ^ϵ r F scrollToElement(d3.select("#layer"+selected));5_ f f f v ^Ϸ s e g 1 .each("end", endCallback)5_ b + b + b B v B ^ϺE a c C easing = 'cubic-in-out', endCallback = () => {}5_ f b + b B v B ^ϺG e f / .on("end", endCallback)5_ a # b + b B v B ^ϺL t ` c . duration = 400, delay = 0,5_ o _ o v ^Ϻ n o p 5_ ` ` n v ^Ϻ u m o } l n M })(offsetTop + element.getBoundingClientRect().top)); k m 9 return t => scrollTo(0, i(t)) j l L var i = d3.interpolateNumber(offsetTop, offset); i k ; .tween("scroll", (offset => () => { h j % .ease(easing) g i + .duration(duration) f h % .delay(delay) e g # d3.transition() d f \ var offsetTop = window.pageYOffset || document.documentElement.scrollTop c e ) { b d + easing = 'cubic-in-out' a c delay = 0, ` b # duration = 400, _ a 1 function scrollToElement(element,5_ u \ ` n v ^Ϻ t v \ var offsetTop = window.pageYOffset || document.documentElement.scrollTop5_ z ) z ) } J v J ^Ϻ y { + .tween("scroll", ); y { ; .tween("scroll", (offset => () => { L var i = d3.interpolateNumber(offsetTop, offset); 9 return t => scrollTo(0, i(t)) M })(offsetTop + element.getBoundingClientRect().top));5_ z 5 z ) z s v J ^Ϻ y { 8 .tween("scroll", scrollTween());5_ u ] z ) z s v J ^Ϻ t x ] var offsetTop = window.pageYOffset || document.documentElement.scrollTop;5_ v ( | ) | s v J ^ϻ u y ( function scrollTween5_ w ~ ) ~ s v J ^ϻ v { w x 5_
w ) s v J ^ϻ y { }; x z . return function(t) { scrollTo(0, i(t)); }; w y c var i = d3.interpolateNumber(window.pageYOffset || document.documentElement.scrollTop, offset); v x return function() {5_
u ) s v J ^ϻ. t u ] var offsetTop = window.pageYOffset || document.documentElement.scrollTop;5_
5 5 : v : ^ϻ5 > .tween("scroll", scrollTween(offset));5_
5 : v : ^ϻ6 5_
5 : v : ^ϻ= v ] ocument.body.getBoundingClientRect().height - window.innerHeight)5_
( v ( ^ϻL w ^ document.body.getBoundingClientRect().height - window.innerHeight)5_ < < V v V ^ϻY x X element.getBoundingClientRect().height - window.innerHeight)5_ ? < V v V ^ϻa y @ element.getBoundingClientRect().top)5_ w 9 < V v V ^ϻ v y { var i = d3.interpolateNumber(window.pageYOffset || document.documentElement.scrollTop, offset);5_ x Z < V v V ^ϻ w z b window.pageYOffset || document.documentElement.scrollTop, offset);5_ x 2 < V v V ^ϻ z w z Y window.pageYOffset || document.documentElement.scrollTop,5_ o o t v % ^ϻ n p 1 function scrollToElement(element, # duration = 400, delay = 0, + easing = 'cubic-in-out' ) { 2 function scrollTween(offset) {5_ o o w v ^ϻ n x 2 function scrollTween(offset) { + return function() { 9 var i = d3.interpolateNumber( 2 window.pageYOffset J || document.documentElement.scrollTop, ( offset); F return function(t) { scrollTo(0, i(t)); }; }; }5_ y y V ^ϻ x # d3.transition() % .delay(delay) + .duration(duration) % .ease(easing) 5 .tween("scroll", scrollTween( ? element.getBoundingClientRect().top ));5_ y V ^ϻ }5_ x x v ^ϻ w y d3.transition() ! .delay(delay) ' .duration(duration) ! .ease(easing) 1 .tween("scroll", scrollTween( ; element.getBoundingClientRect().top )); 5_ ) ( J v J ^ϻ M scrollToElement(d3.select("#layer"+selected).node()); 5_ x x v ^ϻ 5_ x x v ^ϻ 5_ v ^ϻ ; element.getBoundingClientRect().top5_ ! v ^ϻ #d3.select("#layer"+selected).node() 4 .getBoundingClientRect().top5_ " ! # $ * v ^ϻ @d3.select("#layer"+selected).node() .getBoundingClientRect().top5_ ! # " $ * v ^ϻ ?d3.select("#layer"+selected).node().getBoundingClientRect().top5_ " $ # 4 $ * v ^ϻ W d3.select("#layer"+selected).node().getBoundingClientRect().top5_ # % $ # $ * v ^ϻ { ? .node().getBoundingClientRect().top5_ $ & % 4 $ * v ^ϻ | 8 .getBoundingClientRect().top5_ % ( & $ * v ^ϻ #.select("#layer"+selected).node());5_ & ) ' ( $ * v ^ϼ * scrollToElement(d35_ ( * ) v # ^ϼ } )); .top 4 .getBoundingClientRect() # .node() 4 d3.select("#layer"+selected) 1 .tween("scroll", scrollTween( ! .ease(easing) ' .duration(duration) ! .delay(delay) d3.transition()5_ ) , * # # ' v ' ^ϼ ) .delay(delay)5_ * - + , & # ' v ' ^ϼ / .duration(duration)5_ , . - ' # ' v ' ^ϼ) * .duration(500)5_ - / . % # ' v ' ^ϼ+ ' .delay(500)5_ . 0 / " " ' v ' ^ϼ1 ~ ) .ease(easing)5_ / 1 0 ! ! ! v ! ^ϼD 1 .ease('cubic-in-out') * .duration(400) % .delay(0)5_ 0 2 1 ' ' ' v ' ^ϼY 4 // .ease('cubic-in-out') - // .duration(400) ( // .delay(0)5_ 1 3 2 # ' ' v ' ^ϼ[ % .delay(0)5_ 2 4 3 V ^ϼg 1 .ease('cubic-in-out')5_ 3 5 4 V ^ϼn 4 // .ease('cubic-in-out')5_ 4 6 5 # V ^ϼq % .delay(1)5_ 5 7 6 V ^ϼ~ 5_ 6 8 7 ` ` n v ^ϼ _ a // _ a 4 // function scrollToElement(element, & // duration = 400, ! // delay = 0, . // easing = 'cubic-in-out' // ) { _ // var offsetTop = window.pageYOffset || document.documentElement.scrollTop & // d3.transition() ( // .delay(delay) . // .duration(duration) ( // .ease(easing) > // .tween("scroll", (offset => () => { O // var i = d3.interpolateNumber(offsetTop, offset); < // return t => scrollTo(0, i(t)) P // })(offsetTop + element.getBoundingClientRect().top)); // }5_ 7 9 8 j ` ` & v ^ϼ i j 5_ 8 : 9 9 9 ; v ^ϼ 8 : 3